import { defineComponent, ref } from "vue";
import VChart from "vue-echarts";
import { use } from "echarts/core";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import "./TrendChart.css";

// 注册必需的组件
use([
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  CanvasRenderer,
]);

export default defineComponent({
  name: "TrendChart",
  components: {},
  setup() {
    const chartOption = ref({
      tooltip: {
        trigger: "axis",
        backgroundColor: "rgba(0, 0, 0, 0.8)",
        borderColor: "#00d4ff",
        borderWidth: 1,
        textStyle: {
          color: "#fff",
        },
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      legend: {
        data: ["现有确诊", "累计确诊", "累计治愈", "累计死亡"],
        textStyle: {
          color: "#fff",
        },
        top: 10,
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        top: "15%",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: [
          "1月20日",
          "1月25日",
          "2月1日",
          "2月5日",
          "2月10日",
          "2月15日",
          "2月20日",
          "2月25日",
          "3月1日",
          "3月5日",
          "3月10日",
          "3月15日",
        ],
        axisLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 12,
        },
      },
      yAxis: {
        type: "value",
        axisLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.3)",
          },
        },
        axisLabel: {
          color: "#fff",
          fontSize: 12,
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255, 255, 255, 0.1)",
          },
        },
      },
      series: [
        {
          name: "现有确诊",
          type: "line",
          data: [
            287, 1423, 4562, 6891, 8234, 7865, 6543, 5234, 4123, 3456, 2789,
            2345,
          ],
          smooth: true,
          lineStyle: {
            color: "#ff4d4f",
            width: 3,
          },
          itemStyle: {
            color: "#ff4d4f",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(255, 77, 79, 0.5)" },
                { offset: 1, color: "rgba(255, 77, 79, 0)" },
              ],
            },
          },
        },
        {
          name: "累计确诊",
          type: "line",
          data: [
            287, 1710, 14380, 24363, 37198, 66492, 75465, 77658, 80735, 80813,
            80844, 80858,
          ],
          smooth: true,
          lineStyle: {
            color: "#faad14",
            width: 3,
          },
          itemStyle: {
            color: "#faad14",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(250, 173, 20, 0.3)" },
                { offset: 1, color: "rgba(250, 173, 20, 0)" },
              ],
            },
          },
        },
        {
          name: "累计治愈",
          type: "line",
          data: [
            25, 243, 1153, 3281, 6639, 18264, 38556, 57213, 67017, 72440, 76751,
            78249,
          ],
          smooth: true,
          lineStyle: {
            color: "#52c41a",
            width: 3,
          },
          itemStyle: {
            color: "#52c41a",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: "rgba(82, 196, 26, 0.3)" },
                { offset: 1, color: "rgba(82, 196, 26, 0)" },
              ],
            },
          },
        },
        {
          name: "累计死亡",
          type: "line",
          data: [
            6, 41, 304, 492, 811, 1523, 2236, 2663, 3045, 3119, 3193, 3233,
          ],
          smooth: true,
          lineStyle: {
            color: "#8c8c8c",
            width: 3,
          },
          itemStyle: {
            color: "#8c8c8c",
          },
        },
      ],
    });

    return () => (
      <div class="trend-chart">
        <div class="trend-chart__header">
          <h3 class="trend-chart__title">疫情趋势图</h3>
        </div>
        <div class="trend-chart__chart">
          <VChart
            option={chartOption.value}
            autoresize
            style="height: 100%; width: 100%;"
          />
        </div>
      </div>
    );
  },
});
